<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>学生管理</title>
</head>

<body>
<!-- 搜索条件开始 -->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>查询条件</legend>
</fieldset>
<blockquote class="layui-elem-quote">
   <form class="layui-form" method="post" id="searchFrm">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">姓名:</label>
                <div class="layui-input-inline">
                    <input type="text" name="sName" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">学号:</label>
                <div class="layui-input-inline">
                    <input type="text" name="sSid" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">性别:</label>
                <div class="layui-input-block">
                    <input type="radio" name="sGender" value="1" title="男">
                    <input type="radio" name="sGender" value="0" title="女">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">入学时间:</label>
                <div class="layui-input-inline">
                    <input type="text" name="beginDate" id="date1" lay-verify="date" placeholder="开始时间" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline">
                    <input type="text" name="endDate" id="date2" lay-verify="date" placeholder="结束时间" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">状态:</label>
                <div class="layui-input-inline">
                    <input type="radio" name="sStatus" value="1" title="在读">
                    <input type="radio" name="sStatus" value="2" title="休学">
                    <input type="radio" name="sStatus" value="3" title="毕业">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">班级教室:</label>
                <div class="layui-input-block">
                    <select name="cName" lay-filter="classRoom">
                        <option value=""></option>
                        <option value="一年一班">一年一班</option>
                        <option value="一年二班">一年二班</option>
                        <option value="一年三班">一年三班</option>
                        <option value="一年四班">一年四班</option>
                        <option value="一年五班">一年五班</option>
                        <option value="二年一班">二年一班</option>
                        <option value="二年二班">二年二班</option>
                        <option value="二年三班">二年三班</option>
                        <option value="二年四班">二年四班</option>
                        <option value="二年五班">二年五班</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <button type="button" class="layui-btn layui-btn-normal  layui-icon layui-icon-search" id="doSearch">查询</button>
                <button type="reset" class="layui-btn layui-btn-warm  layui-icon layui-icon-refresh">重置</button>
            </div>
        </div>
    </form>
</blockquote>
<!-- 搜索条件结束 -->
<table class="layui-hide" id="studentTable" lay-filter="studentTable"></table>

<!--学生对应的教师信息开始-->
<div style="display: none;padding-top: 20px" id="teacherDiv" >
    <table class="layui-hide" id="teacherTable" lay-filter="studentTable"></table>
</div>
<!--学生对应的教师信息结束-->

<!-- 添加和修改的弹出层-->
<div style="display: none;padding: 20px" id="insertOrUpdateDiv" >
    <form class="layui-form"  lay-filter="dataFrm" id="dataFrm">
        <div class="layui-form-item" style="text-align: center;">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" id="imgPath" name="sSid" lay-verify="required"  placeholder="请输入学号" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="test1">头像上传</button>
                    <div class="layui-upload-list" id="ddd">
                        <img src="" class="layui-upload-img" style="width: 400px;height: 200px;" id="imgUp">
                        <p id="demoText"></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">学生姓名:</label>
                <div class="layui-input-inline">
                    <input type="hidden" name="sId">
                    <input type="text" name="sName" lay-verify="required"   placeholder="请输入学生姓名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">性别:</label>
                <div class="layui-input-inline">
                    <input type="radio" name="sGender" value="1" checked="checked" title="男">
                    <input type="radio" name="sGender" value="0" title="女">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">入学时间:</label>
                <div class="layui-input-inline">
                    <input type="text" name="sEnrol" id="date3" lay-verify="required|date" placeholder="开始时间" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">毕业时间:</label>
                <div class="layui-input-inline">
                    <input type="text" name="sGraduate" id="date4" lay-verify="required|date" placeholder="开始时间" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">就读状态:</label>
                <div class="layui-input-inline">
                    <select name="sStatus" lay-verify="required" lay-filter="xmFilter">
                        <option value=""></option>
                        <option value="1">在读</option>
                        <option value="2">休学</option>
                        <option value="3">毕业</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">班级教室:</label>
                <div class="layui-input-inline">
                    <select name="cId" lay-verify="required" lay-filter="xmFilter">
                        <option value=""></option>
                        <option value="1">一年一班</option>
                        <option value="2">一年二班</option>
                        <option value="3">一年三班</option>
                        <option value="4">一年四班</option>
                        <option value="5">一年五班</option>
                        <option value="6">二年一班</option>
                        <option value="7">二年二班</option>
                        <option value="8">二年三班</option>
                        <option value="9">二年四班</option>
                        <option value="10">二年五班</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <div class="layui-input-block" style="text-align: center;">
                <button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release" lay-filter="doSubmit" lay-submit="">提交</button>
                <button type="reset" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh" >重置</button>
            </div>
        </div>
    </form>
</div>
<!--结束-->

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<!--查看学生对应的教师信息-->
<script type="text/html" id="showTeacher">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
</script>

<!--学生头像-->
<script type="text/html" id="tem_img">
<img src="{{d.sSid}}">
</script>

<script>
    var tableIns; // 学生信息表，查询的时候重载调用
    var teacherTable; // 学生对应的教师信息表

    layui.use([ 'jquery', 'layer', 'form', 'table','laydate','upload'], function(){
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var laydate  = layui.laydate ;
        var upload = layui.upload;
        var table = layui.table //表格

        //执行一个 table 实例
        tableIns=table.render({
            elem: '#studentTable'
            ,id:'studentTable'
            ,height: 520
            ,url: 'student/getAllStudent' //数据接口
            ,title: '用户表'
            ,page: true //开启分页
            ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            ,cols: [[ //表头 sort排序
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'sId', title: 'ID', width:70,align:'center', sort: true, fixed: 'left'}
                ,{field: 'sSid', title: '头像', width:110, align:'center',templet:'#tem_img'}
                ,{field: 'sName', title: '姓名',align:'center', width:100}
                ,{field: 'sGender', title: '性别', width:80,align:'center', templet: function (d) {
                        if(d.sGender == 0){
                            return '女'
                        }else if(d.sGender == 1) {
                            return '男'
                        }else {
                            return '...'
                        }
                    }}
                ,{field: 'sEnrol', title: '入学时间', sort: true,align:'center',align:'center', width:110}
                ,{field: 'sGraduate', title: '毕业时间', sort: true,align:'center', width:110}
                ,{field: 'sStatus', title: '状态', width: 80,align:'center',templet: function (d) {
                        if(d.sStatus == 1){
                            return '在读'
                        }else if(d.sStatus == 2) {
                            return '休学'
                        }else if(d.sStatus == 3) {
                            return '毕业'
                        }else {
                            return '...'
                        }
                    }}
                ,{field: 'classRoom', title: '班级', width: 135,align:'center',templet: '<div>{{d.classRoom.cName}}</div>'}
                ,{title: '教师', width: 100,align:'center',toolbar:'#showTeacher'}
                ,{title: '操作',fixed: 'right', width: 185, align:'center', toolbar: '#barDemo'}
            ]]
        });


        //模糊查询
        $("#doSearch").click(function () {
            var params = $("#searchFrm").serialize();
            tableIns.reload({
                url: "student/selectStudent?" + params
            })
        });


        //监听头工具栏事件
        table.on('toolbar(studentTable)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id)
                ,data = checkStatus.data; //获取选中的数据
            switch(obj.event){
                case 'add':
                    // 打开编辑的弹出层
                    openInsertStudent(data);
                    break;
                case 'update':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else if(data.length > 1){
                        layer.msg('只能同时编辑一个');
                    } else {
                        layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
                    }
                    break;
                case 'delete': // 批量删除
                    if(data.length === 0){
                        layer.msg('请选择一1行');
                    } else {
                        batchDel();
                    }
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(studentTable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'detail'){
                showTeacher(data);
            } else if(layEvent === 'del'){
                falseDel(data);
                // layer.confirm('真的删除行么', function(index){
                //     obj.del(); //删除对应行（tr）的DOM结构
                //     layer.close(index);
                //     //向服务端发送删除指令
                // });
            } else if(layEvent === 'edit'){
                // 打开编辑的弹出层
                openUpdateStudent(data);
                /*将头像回显到弹出层*/
                $('#imgUp').attr('src', data.sSid);
            }
        });

        var mainIndex;
        var url;

        //假删除
        function falseDel(data) {
            data.sId;
            /*弹出提示是否确认删除*/
            layer.confirm('确定删除选中的数据？', {icon: 3, title: '提示信息'}, function (index) {
                /*向服务端发送删除指令*/
                $.ajax({
                    url:'student/falseDelete',
                    data:{sid:data.sId},
                    type:'post',
                    dataType:'json',
                    success:function (_data) {
                        tableIns.reload(); // 刷新表格数据
                        layer.msg(_data); // 提示删除成功或失败，后台返回的数据
                        layer.close(index); // 关闭提示框
                    }
                })
            })
        }

        //批量删除
        function batchDel() {
            /*checkStatus：复选框被选中的行
                        * data：被选中的行数据
                        * studentId：传给后台的参数String，在后台转为List*/
            var checkStatus = table.checkStatus('studentTable'),
                data = checkStatus.data,
                studentId = '';
            if(data.length > 0) {
                /*将选中行的ID封装成字符串*/
                for (var i in data) {
                    studentId+=data[i].sId+",";
                }
                /*弹出提示是否确认删除*/
                layer.confirm('确定删除选中的数据？', {icon: 3, title: '提示信息'}, function (index) {
                    /*向服务端发送删除指令*/
                    $.ajax({
                        url:'student/deleteAll',
                        data:{studentId:studentId},
                        type:'post',
                        dataType:'json',
                        success:function (_data) {
                            tableIns.reload(); // 刷新表格数据
                            layer.msg(_data); // 提示删除成功或失败，后台返回的数据
                            layer.close(index); // 关闭提示框
                        }
                    })
                })
            }else{
                layer.msg('请选择需要删除的数据');
            }
        }

        // 增加
        function openInsertStudent(date) {
            mainIndex=layer.open({
                type:1,
                title:'增加学生',
                content:$("#insertOrUpdateDiv"), // 找到编辑的弹出层页面
                area:['800px','400px'],
                success:function(index){
                    // 将弹出层阴影往后面放一层
                    var mask = $(".layui-layer-shade");
                    mask.appendTo(index.parent());

                    /*增加的url，方便在保存的时候调用，保存里面修改和增加就url不一样*/
                    url="student/insert";
                }
            });
        }

        // 修改
        function openUpdateStudent(date) {
            mainIndex=layer.open({
                type:1,
                title:'修改学生信息',
                content:$("#insertOrUpdateDiv"), // 找到编辑的弹出层页面
                area:['800px','400px'],
                success:function(index){
                    // 将弹出层阴影往后面放一层
                    var mask = $(".layui-layer-shade");
                    mask.appendTo(index.parent());

                    /*date：选中的当前行数据 ，form.val： 将数据渲染到dataFrm这个表格*/
                    form.val("dataFrm",date);

                    /*修改的url，方便在保存的时候调用，保存里面修改和增加就url不一样*/
                    url="student/updateByPrimaryKey";
                }
            });
        }

        //保存
        form.on("submit(doSubmit)",function(obj){
            //序列化表单数据
            var params=$("#dataFrm").serialize();

            $.ajax({
                url:url,
                data:params,
                type:'post',
                dataType:'json',
                success:function (_data) {
                    layer.msg(_data);
                    layer.close(mainIndex);
                    tableIns.reload();
                }
            })
        });

        // 查看教师表
        function showTeacher(data){
            mainIndex=layer.open({
                type:1,
                title:'教师信息',
                content:$("#teacherDiv"),
                area:['800px','400px'],
                success:function (layero) {
                    // 将弹出层阴影往后面放一层
                    var mask = $(".layui-layer-shade");
                    mask.appendTo(layero.parent());
                }
            });
            teacherTable=table.render({
                elem: '#teacherTable'   //渲染的目标对象
                ,url:'teacher/getTeacherByStudentId?sId=' + data.sId //数据接口
                ,title: '教师信息'
                ,cellMinWidth:200 //设置列的最小默认宽度
                ,page: 1  //是否启用分页, limits: [10, 20, 30]
                ,limits: [5, 10, 15]
                ,limit: 5//默认采用3
                ,cols: [[   //列表    数据
                    {field:'tName', title:'姓名',align:'center',width:"20%"}
                    ,{field:'tGender', title:'性别',align:'center',width:"15%", templet: function (d) {
                        if(d.tGender == 0){
                            return '女'
                        }else if(d.tGender == 1) {
                            return '男'
                        }else {
                            return '...'
                        }
                    }}
                    ,{field:'tDuty', title:'职务',align:'center',width:"15%"}
                    ,{field:'tEamil',title:'邮箱',align:'center',width:'30%'}
                    ,{field:'tStatus',title:'状态',align:'center',width:'20%',templet:function (d) {
                        if(d.tStatus == 1){
                            return '在职'
                        }else if(d.tStatus == 2) {
                            return '休假'
                        }else if(d.tStatus == 3) {
                            return '离职'
                        }else {
                            return '...'
                        }
                    }}
                ]]
            });
        }


        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: 'xqcfile/xqcupload' //改成您自己的上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    /*result:图片的详细信息，路径加二进制*/
                    $('#imgUp').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                //上传成功
                // console.log(res.data.src)
                $('#imgPath').val(res.data.src)

            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });

        //日期
        laydate.render({elem: '#date1'});
        laydate.render({elem: '#date2'});
        laydate.render({elem: '#date3'});
        laydate.render({elem: '#date4'});

        //渲染表单：layui 会对 select、checkbox、radio 等原始元素隐藏
        form.render();
    });
</script>
</body>
</html>